<script setup lang="ts">
import type { PaginationProps } from 'element-plus'

const props = withDefaults(defineProps<Partial<PaginationProps>>(), {
  pagerCount: 5,
  background: true,
  layout: 'pager, jumper',
})
</script>

<template>
  <el-pagination v-bind="props" />
</template>

<style lang="css" scoped>
:deep(.el-pager li) {
  width: 70px !important;
  margin: 0 !important;
  border-radius: 0 !important;
  border: 1px solid #dcdfe6 !important;
  padding-top: 16px !important;
  padding-bottom: 16px !important;
}
:deep(.el-pager li:not(:first-child)) {
  border-left-width: 0px !important;
}
:deep(.el-pagination__goto) {
  display: none !important;
}
:deep(.el-pagination__classifier) {
  display: none !important;
}
</style>
